<!--
 * @Author: zhangduo 445629906@qq.com
 * @Date: 2023-12-06 12:35:28
 * @LastEditors: zhangduo 445629906@qq.com
 * @LastEditTime: 2023-12-25 01:48:12
 * @FilePath: \mdbj-ui\src\components\Map\road\roadDetailPanel.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by zhangduo, All Rights Reserved. 
-->
<template>
  <div>
    <el-row>
      <!-- <el-col :span="24" class="title-row">
        <span>| 详细信息</span>
      </el-col> -->
      <el-col :span="24">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="roadPanel">
            <!-- 组件依赖feature属性，所以需要等feature有值后再渲染-->
            <el-descriptions
              :column="2"
              border
              :contentStyle="contentStyle"
              :labelStyle="labelStyle"
              size:small
              v-if="feature"
            >
              <el-descriptions-item>
                <template slot="label"> OBJECTID </template>
                {{ feature.attributes.objectid }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 道路编码 </template>
                {{ feature.attributes.code }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 道路名称 </template>
                {{ feature.attributes.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 原路名 </template>
                {{ feature.attributes.oldname }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 道路编号 </template>
                {{ feature.attributes.roadnumber }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 道路等级 </template>
                <dict-tag
                  :options="dict.type.sys_roadclass_js"
                  :value="feature.attributes.roadclass_js"
                />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 道路长度(m) </template>
                {{ feature.attributes.Shape__Length.toFixed(2) }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 道路宽度(m) </template>
                {{ feature.attributes.width }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 路面材料 </template>
                <dict-tag
                  :options="dict.type.sys_pavementmaterials"
                  :value="feature.attributes.pavementmaterials"
                />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 起点 </template>
                {{ feature.attributes.startpoint }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 止点 </template>
                {{ feature.attributes.endpoint }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 保洁单位 </template>
                {{ feature.attributes.cleancompany }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <!-- roadsurfaceDataPanel 依赖roadCode属性，所以需要等roadCode有值后再渲染-->
          <el-tab-pane label="道路面信息" name="roadsurfacePanel">
            <roadsurfaceDataPanel
              ref="roadsurfaceDataPanel"
              :mapview="mapview"
              :roadcode="roadcode"
              :isedit="false"
              v-if="roadcode"
            />
          </el-tab-pane>
          <el-tab-pane label="道路巡查记录信息" name="roadInceptionDataPanel">
            <roadInceptionDataPanel
              ref="roadInceptionDataPanel"
              :mapview="mapview"
              :roadcode="roadcode"
              :isedit="false"
              v-if="roadcode"
            />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <div class="footer" v-if="false">
      <el-button type="primary" plain icon="el-icon-edit" @click="handleUpdate"
        >修 改</el-button
      >
      <el-button
        type="primary"
        plain
        icon="el-icon-circle-close"
        @click="cancel"
        >关 闭</el-button
      >
    </div>
  </div>
</template>

<script>
import roadsurfaceDataPanel from "./roadsurfaceDataPanel";
import roadInceptionDataPanel from "./roadInceptionDataPanel";

export default {
  props: {
    paramObj: { default: () => {} },
    mapview: { default: () => {} },
  },
  dicts: ["sys_roadclass_js", "sys_pavementmaterials"],
  inject: ["toggleComponent"],
  components: {
    roadsurfaceDataPanel,
    roadInceptionDataPanel,
  },
  data() {
    return {
      roadcode: undefined,
      feature: undefined,
      roadFeatureLayer: undefined,
      featureLayerView: undefined,
      activeName: "roadPanel",
      // 内容样式
      contentStyle: {
        "text-align": "left",
        "min-width": "100px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      // label样式
      labelStyle: {
        // width: "100px",
        "text-align": "left",
        "min-width": "120px",
        width: "100px",
        // "background-color": "#1682e621",
      },
      highlight: undefined,
    };
  },
  /**
   * @description: 首次加载先触发created然后再mounted，所以需要再mounted之前的created里先initData
   * @return {*}
   */
  created() {
    console.log("created");
  },
  mounted() {
    console.log("mounted");
    // this.initData();
  },
  /**
   * @description: 之后的每次点击均触发activated，所以再调用一遍initData
   * @return {*}
   */
  activated() {
    console.log("activated");
    this.initData();
  },
  deactivated() {
    let _self = this;
    console.log("deactivated");
    // _self.highlight?.remove();
    // _self.featureLayer = undefined;
    // _self.feature = undefined;
    // _self.featureLayerView = undefined;
    // _self.roadcode = undefined;
    // _self.activeName = "roadPanel";
  },
  methods: {
    /**
     * @description: 初始化数据
     * @return {*}
     */
    initData() {
      let _self = this;
      console.log(_self.paramObj);

      _self.feature = _self.paramObj.mapclick
        ? _self.paramObj.feature
        : _self.feature
        ? _self.feature
        : _self.paramObj.feature;
      _self.roadcode = _self.feature.attributes.code;
      _self.featureLayer = _self.paramObj.featureLayer;
    },

    /**
     * @description: 更新按钮
     * @return {*}
     */
    handleUpdate() {
      let _self = this;
      const paramObj = {
        feature: _self.feature,
        featureLayer: _self.featureLayer,
      };
      // 先移除之前的道路面数据，以免与编辑组件添加的道路面图层重复
      this.$refs.roadsurfaceDataPanel.removeRoadSurfaceLayer();
      this.toggleComponent("roadEditPanel", paramObj);
    },
    cancel() {
      let _self = this;
      // 移除道路面数据
      this.$refs.roadsurfaceDataPanel.removeRoadSurfaceLayer();
      _self.highlight?.remove();
      _self.featureLayer = undefined;
      _self.feature = undefined;
      _self.featureLayerView = undefined;
      _self.roadcode = undefined;
      _self.activeName = "roadPanel";
    },
  },
};
</script>

<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 1vh;
}

.footer {
  margin-top: 1vh;
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
}
</style>
